<template>
	<view class="container">
		<cu-custom isBack title="监控列表" />
		<video class="videoSelf" src="" play-btn-position="center"></video>

		<view class="top-tool">
			<image src="/static/images/watch/t1.png" class="top-tool-item"></image>
			<image src="/static/images/watch/t2.png" class="top-tool-item"></image>
		</view>

		<view class="tool">
			<view class="line-cell">
				<image
					src="/static/images/watch/jian.png"
					class="line-cell-btn"
				></image>
				<view class="line-cell-txt">变倍</view>
				<image src="/static/images/watch/jia.png" class="line-cell-btn"></image>
			</view>
			<!--  -->
			<view class="control">
				<view class="cl-item cl-item-top" hover-class="clickH">
					<image src="/static/images/watch/arrow.png" class="arrowIcon"></image>
				</view>
				<view class="cl-item cl-item-bottom" hover-class="clickH">
					<image src="/static/images/watch/arrow.png" class="arrowIcon"></image>
				</view>
				<view class="cl-item cl-item-left" hover-class="clickH">
					<image src="/static/images/watch/arrow.png" class="arrowIcon"></image>
				</view>
				<view class="cl-item cl-item-right" hover-class="clickH">
					<image src="/static/images/watch/arrow.png" class="arrowIcon"></image>
				</view>
				<view class="cl-circle"></view>
			</view>
			<!--  -->
			<view class="line-cell">
				<image
					src="/static/images/watch/jian.png"
					class="line-cell-btn"
				></image>
				<view class="line-cell-txt">变焦</view>
				<image src="/static/images/watch/jia.png" class="line-cell-btn"></image>
			</view>
			<!--  -->
		</view>

		<view class="cellBox">
			<view class="cell">
				<image src="/static/images/watch/map1.png" class="cell-icon"></image>
				<text class="line-1">监测点：</text>
				<text class="line-2">太阳城监测点</text>
			</view>
			<!--  -->
			<view class="cell">
				<image src="/static/images/watch/user.png" class="cell-icon"></image>
				<text class="line-1">负责人：</text>
				<text class="line-2">张三</text>
			</view>
			<!--  -->
			<view class="cell">
				<image src="/static/images/watch/phone.png" class="cell-icon"></image>
				<text class="line-1">联系方式：</text>
				<text class="line-2">15851025541</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #fff;
}
.videoSelf {
	width: 100%;
	height: 433rpx;
}
.top-tool {
	padding: 18rpx 25rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	.top-tool-item {
		width: 38rpx;
		height: 38rpx;
		margin-right: 63rpx;
	}
}
.tool {
	border-top: 24rpx solid #f7f7f7;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 60rpx;
	.line-cell {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		&-btn {
			width: 66rpx;
			height: 66rpx;
		}
		&-txt {
			margin: 30rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
}
.control {
	--size-: 215rpx;
	position: relative;
	width: var(--size-);
	height: var(--size-);
	border: 2px solid #474a54;
	background: #efefef;
	border-radius: 50%;
	overflow: hidden;
	.cl-circle {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		width: 62rpx;
		height: 62rpx;
		background: #efefef;
		border: 3px solid #474a54;
		border-radius: 50%;
	}
	.cl-item {
		position: absolute;
		border: 2px solid #474a54;
		display: flex;
		align-items: center;
		justify-content: center;

		.arrowIcon {
			width: 26rpx;
			height: 26rpx;
		}
	}
	.cl-item-top {
		top: 6%;
		left: 43%;
		width: calc(var(--size-) / 2);
		height: calc(var(--size-) / 2);
		border-radius: var(--size-) 0 0 0;
		transform: rotate(45deg) translate(-50%, 0%);
		.arrowIcon {
			transform: rotate(225deg) translate(-50%, 0%);
		}
	}
	.cl-item-bottom {
		bottom: 4%;
		left: 4%;
		width: calc(var(--size-) / 2);
		height: calc(var(--size-) / 2);
		border-radius: var(--size-) 0 0 0;
		transform: rotate(225deg) translate(-50%, 0%);
		.arrowIcon {
			transform: rotate(225deg) translate(-50%, 0%);
		}
	}
	.cl-item-left {
		top: 5%;
		left: 6%;
		width: calc(var(--size-) / 2);
		height: calc(var(--size-) / 2);
		border-radius: var(--size-) 0 0 0;
		transform: rotate(-45deg) translate(-50%, 0%);
		.arrowIcon {
			transform: rotate(225deg) translate(-50%, 0%);
		}
	}
	.cl-item-right {
		bottom: 3%;
		left: 41%;
		width: calc(var(--size-) / 2);
		height: calc(var(--size-) / 2);
		border-radius: var(--size-) 0 0 0;
		transform: rotate(135deg) translate(-50%, 0%);
		.arrowIcon {
			transform: rotate(225deg) translate(-50%, 0%);
		}
	}
	.clickH {
		background-color: #65bbea;
	}
}
.cellBox {
	border-top: 24rpx solid #f7f7f7;
}
.cell {
	background-color: #fff;
	display: flex;
	padding: 20rpx 20rpx;
	border-bottom: 1px solid #f7f5f5;
	.cell-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
	.line-1 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.line-2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 0.8;
	}
}
</style>
